<template>
	<view class="container-box">
		<!-- <view class="head-tabs">
			<u-tabs :list="tabList" @click="tabClick"></u-tabs>
		</view> -->
		<view class="head-tabs">

			<view class="tabs-item" :class="[i===(index-1)?'tabs-item-active':'']" v-for='(item,i) in tabList'
				:key='item.name' @click="tabClick(i)">
				{{item.name}}
			</view>
		</view>
		<view class="content-box">
			<scroll-view scroll-y="true" class="scroll-Y" :style="{height:'calc( 100vh - '+menuHeight+'px )'}"
				@scrolltolower="scrolltolower">
				<view class="item-box" v-for="item in listArr" :key="item.id" @click="hairCommunityClick(item)">
					<view class="right-box">
						<view class="tilte-top">{{ item.title }}</view>
						<!-- <view class="tilte-center">{{ item.introduction?item.introduction:'' }}</view> -->
						<view class="title-bottom">
							<view style="display: flex; font-size: 20rpx; margin-right: 20rpx;align-items: center;">
								<u-icon name="chat"></u-icon><text>{{ item.commentQuantity }}</text>
							</view>
							<view v-if="item.isLike == 'Y'"
								style="display: flex; font-size: 20rpx;align-items: center;">
								<u-icon color="#e45656" name="heart-fill"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
							<view v-else style="display: flex; font-size: 20rpx;align-items: center;">
								<u-icon name="heart"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
						</view>
					</view>
					<img :src="item.image ? item.image : baseUrl + '/static/error.png'" alt="" />
				</view>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		questionsOrScience
	} from "@/api/axios/HairCommunity.js";
	export default {
		props: {
			openId: {
				require: true,
				type: String,
			},
			tabList: {
				require: true,
				type: Array,
			},
		},
		data() {
			return {
				listArr: [],
				index: 1,
				pageNo: 1,
				pageSize: 20,
				status: "loadmore", //loadmore/loading / nomore
				menuHeight: "",
			};
		},
		methods: {
			scrolltolower() {
				console.log('---------99999----------------');
				let _this = this;
				if (this.status !== "nomore" && this.status !== "loading") {
					this.status = "loading";
					questionsOrScience({
						params: {
							openId: this.openId,
							type: 1,
							category: this.index,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
						},
					}).then((res) => {
						_this.listArr = _this.listArr.concat(res.records);
						if (res.records.length == _this.pageSize) {
							_this.pageNo = _this.pageNo + 1;
							_this.status = "loadmore";
						} else {
							_this.status = "nomore";
						}
					});
				}
			},

			tabClick(index) {
				this.listArr = [];
				this.index = index + 1;
				this.pageNo = 1;
				this.init();
			},
			hairCommunityClick(data) {
				delete data.content;
				delete data.image;
				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index?id=" +
						data.id +
						"&isLike=" +
						data.isLike +
						"&isFavorite=" +
						data.isFavorite,
				});
			},

			init(index) {
				let _this = this;
				// questionsOrScience({
				// 	params: {
				// 		openId: this.openId,
				// 		type: 2,
				// 		category: index
				// 	}
				// }).then(res => {
				// 	_this.listArr = res.records
				// })
				this.status = "loading";
				questionsOrScience({
					params: {
						openId: this.openId,
						type: 1,
						category: this.index,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
					},
				}).then((res) => {
					_this.listArr = _this.listArr.concat(res.records);
					if (res.records.length == _this.pageSize) {
						_this.pageNo = _this.pageNo + 1;
						_this.status = "loadmore";
					} else {
						_this.status = "nomore";
					}
				});
			},
		},
		mounted() {

			let res = uni.getSystemInfoSync();
			let menu = wx.getMenuButtonBoundingClientRect();
			let systemBarHeight =
				(menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
			if (res.model.indexOf("iPhone") > -1) {
				systemBarHeight += 4;
			}

			this.menuHeight = res.statusBarHeight + 220



			this.init();
		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>